// CozeImageAnalyzer 组件样式
.coze-image-analyzer {
  .ant-upload-drag {
    border: 2px dashed #d9d9d9;
    border-radius: 8px;
    background: #fafafa;
    transition: all 0.3s ease;
    
    &:hover {
      border-color: #1890ff;
      background: #f0f8ff;
    }
  }

  .ant-upload-drag-icon {
    font-size: 48px;
    color: #1890ff;
    margin-bottom: 16px;
  }

  .ant-upload-text {
    font-size: 16px;
    color: #666;
    margin-bottom: 8px;
  }

  .ant-upload-hint {
    font-size: 14px;
    color: #999;
  }

  .analysis-result {
    .result-content {
      background: #f5f5f5;
      padding: 16px;
      border-radius: 6px;
      white-space: pre-wrap;
      max-height: 400px;
      overflow: auto;
      font-family: 'Courier New', monospace;
      line-height: 1.6;
      border: 1px solid #e8e8e8;
    }

    .result-meta {
      color: #666;
      font-size: 14px;
      margin-bottom: 12px;
    }
  }

  .config-section {
    .ant-form-item-label {
      font-weight: 600;
    }

    .config-help {
      background: #f0f2f5;
      padding: 12px;
      border-radius: 6px;
      margin-top: 16px;

      h4 {
        margin-bottom: 8px;
        color: #333;
      }

      ul {
        margin: 0;
        padding-left: 20px;

        li {
          margin-bottom: 4px;
          color: #666;
        }
      }
    }
  }

  .upload-area {
    .ant-upload-list-picture-card {
      .ant-upload-list-item {
        border-radius: 8px;
      }
    }
  }

  .loading-section {
    text-align: center;
    padding: 40px;

    .ant-spin {
      .ant-spin-dot {
        font-size: 24px;
      }
    }

    p {
      margin-top: 16px;
      color: #666;
      font-size: 16px;
    }
  }

  .history-section {
    .history-item {
      margin-bottom: 12px;
      padding: 8px;
      background: #fafafa;
      border-radius: 4px;
      font-size: 12px;
      color: #666;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        background: #e6f7ff;
        color: #1890ff;
      }
    }
  }

  .page-header {
    text-align: center;
    margin-bottom: 24px;

    .page-title {
      color: #1890ff;
      margin-bottom: 8px;
    }

    .page-description {
      color: #666;
      font-size: 16px;
    }
  }

  .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;

    .empty-icon {
      font-size: 48px;
      margin-bottom: 16px;
      color: #d9d9d9;
    }

    .empty-title {
      font-size: 18px;
      margin-bottom: 8px;
      color: #666;
    }

    .empty-description {
      color: #999;
      line-height: 1.6;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .coze-image-analyzer {
    .ant-col {
      margin-bottom: 16px;
    }

    .analysis-result {
      .result-content {
        font-size: 14px;
        padding: 12px;
      }
    }

    .config-section {
      .ant-form-item {
        margin-bottom: 16px;
      }
    }
  }
}

// 暗色主题支持
[data-theme='dark'] {
  .coze-image-analyzer {
    .ant-upload-drag {
      background: #1f1f1f;
      border-color: #434343;

      &:hover {
        border-color: #1890ff;
        background: #111a2c;
      }
    }

    .analysis-result {
      .result-content {
        background: #1f1f1f;
        border-color: #434343;
        color: #fff;
      }
    }

    .config-section {
      .config-help {
        background: #1f1f1f;
        border: 1px solid #434343;
      }
    }

    .history-section {
      .history-item {
        background: #1f1f1f;
        border: 1px solid #434343;

        &:hover {
          background: #111a2c;
        }
      }
    }
  }
}